<template>
  <div class="container">
    <div class="header">
      <div class="search">
        <input type="text" name="search" placeholder="请输入职位,公司名称" v-model="searchText">
        <img src="http://file.rzkeji.com/web/recruit/icon/close.png" class="close" @click="close()"/>
      </div>
      <div :class="{cancel:true,blue:blue}" @click="cancel">{{cancelText}}</div>
    </div>
    <!-- <div class="content">
      <div class="hot">
        <img src="http://file.rzkeji.com/web/recruit/icon/banner1.png"/>
        热门职位
      </div>
      <ul>
        <li>指导工</li>
        <li>指导工导工</li>
        <li>指</li>
        <li>指导</li>
        <li>指导工导工</li>
        <li>指导工导工</li>
        <li>指导工导工</li>
        <li>指导</li>
        <li>指导导工</li>
      </ul>
    </div> -->
  </div>
</template>

<script>

export default {
  data () {
    return {
      searchText:"",
      blue:"",
      type:''
    }
  },

  computed: {
    cancelText(){
      if(this.searchText.length==0){
        this.blue=false
        return "取消"
      }else{
        this.blue=true
        return "搜索"
      }
    }
  },

  methods: {
    close(){
      this.searchText=""
    },
    async cancel(){
      if(this.blue  &&!this.type){
        let keyword=this.$currency.trim(this.searchText);
        let res=await this.$axios('/position/getPositionList',{params:{keyword:keyword}})
        
       this.$store.dispatch('setSearchData',res.data.data)
        this.$router.push({name:'searchList'})
      }else if(this.blue && this.type){
        let res=await this.$axios('/resume/getAllResume',{params:{keyword:this.searchText}})
        if(res.data.level=='success'){
          this.$store.dispatch('setSearchData',res.data.data)
         this.$router.push({name:'searchList',query:{type:'resume'}})
        }else{
          this.$currency.showToast(res.data.message)
        }
      }
      else{
        this.$router.back()
      }
    },
    
  },
  mounted() {
       if(this.$route.query.type){
      this.type=true
      }else{
        this.type=''
      }
  
    }
}
</script>

<style scoped>
.header{width: 100%;height: 76px;border-bottom: 1px #D5D5D5 solid;display: flex;justify-content: row;}
.search{width: 260px;height: 44px;position: relative;margin-left: 20px;margin-top: 16px;}
.search input{border: 1px #D5D5D5 solid;border-radius:5px;width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding-left: 10px;}
.search img{width: 20px;height: 20px;position: absolute;right: 0px;top: 11px;z-index: 99}
.cancel{width: 60px;height: 44px;margin-left: 20px;margin-top: 16px;border: 1px #D5D5D5 solid;text-align: center;    border-radius: 5px;line-height: 44px;}
.hot{width: 100%;height:30px;line-height: 70px;padding: 20px;font-weight: 700;    border-bottom: 1px #F2F2F2 solid;font-size: 15px;}
.hot img{width: 20px;height: 20px;vertical-align: middle;margin-right: 5px;}
.content ul{width: 350px;margin-left: 10px;}
.content ul li{line-height:30px; color: #808080;border: 1px #d7d7d7 solid;float: left;margin-left: 10px;margin-top: 10px;border-radius: 5px;}

.blue{background-color: #0180CF;border: 1px #0057B7 solid;color: #fff;}
</style>
